<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 680px;
            margin: 0 auto;

        }

        li {
            list-style: none;
            display: flex;
            margin-bottom: 10px;

            img {
                width: 200px;
                margin-right: 10px;+
            }

        }
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul>
        </ul>
        <style>
            ol {
                display: flex;
                justify-content: center;
                gap: 5px;
                li {
                    width: 20px;
                    height: 20px;
                    border: 1px solid;
                    align-items: center;
                    text-align: center;
                    justify-content: center;

                }
                .active {
                    background-color: #269745;
                    color: white;
                }
            }
            section{
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
        <section >
            <select>
                <option value="4">4条/页</option>
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
                <option value="50">50条/页</option>
            </select>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </section>
    </div>
    <script>
        // 点击分页器
        $('ol li').click(function () {
            console.log(this);
            $(this).addClass('active').siblings().removeClass('active')
            // 获取点击的分页内容用来得到要切换的页码
            let page = $(this).html()
            // 重新发起请求 传入页码
            getdata(page)
        })
        // 选择每页显示条数
       $('select').on('click',function(){
        let pageSize = $(this).val()
        // 重新发起请求 显示条数
        getdata(1,pageSize)      
       })       
        // 初始化
        getdata()
        // 请求部分           给形参设置默认值
        function getdata(page=1,pageSize=4) {
            axios({
                method: 'get',
                url: `https://www.jqscsfq.com/api/web/news?is_web=1`,
                params:{
                    pageSize,
                    page
                }
            }).then(res => {
                // 数据请求成功
                setdom(res.data.data)
                console.log(res.data);
            })
        }
        // 渲染dom
        function setdom(arr) {
            // 插入前初始化dom ul
            $('ul').html('')
            arr.forEach(item => {
                $('ul').append(`
                
                 <li>
                <img src="https://www.jqscsfq.com${item.image_path}" alt="">
                <div>
                    <p>${item.title}</p>
                    <p>${item.publish_at}</p>
                    <p>${item.typeText}</p>
                    <p>${item.desc}</p>
                </div>
            </li>`)

            })
        }
        function setpage(params) {          
        }
    </script>
</body>
</html>